<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<div id="demo">{{text}}</div>
<script>
class Vue {
	constructor(options={}) {
		this.$options = options
		this._data = options.data
		Object.keys(options.data).forEach((key)=>this._proxy(key));
		observer(options.data, this._update)
		this._update()
	}
	_update(){
		this.$options.render()
	}
	_proxy(key){
		const self = this;
		Object.defineProperty(this,key,{
			enumerable : true,
			configurable : true,
			set : function setterProxy(val){
				self._data[key] = val;
			},
			get : function getterProxy(key){
				return self._data[key];
			}
		})
	}
}
 
 
function observer(value, cb){
	Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}
 
function defineReactive(obj, key, val, cb) {
	Object.defineProperty(obj, key, {
		enumerable: true,
		configurable: true,
		get: ()=>{return val},
		set:newVal=> {
			cb()
		}
	})
}
 
var demo = new Vue({
	el: '#demo',
	data: {
		text: 123,
	},
	render(){
		console.log("我要render了")
	}
})
/**
 * 中data 里面所有的属性置于 observer，
 * 然后data里面的属性，比如 text 以改变，
 * 就引起_update()函数调用进而重新渲染，
 * 是怎样做到的呢，我们知道其实就是赋值的时候就要改变对吧，
 * 当我给data下面的text 赋值的时候 set 函数就会触发，
 * 这个时候 调用 _update 就ok了，但是
 */
console.log(demo.text) 
setTimeout(function(){
	demo._data.text = 444
}, 3000)
/**
 * 第一步先说到这里，我们会发现一个问题，
 * data中任何一个属性的值改变，都会引起
 * _update的触发进而重新渲染，属性这显然不够精准啊
 */
</script>	
</body>
</html>